<template>
  <div class="goodwrap">
     <div class="gooddetail">
       <div class="goodimg">
         <img class="img-good" :src="goodsdata[0].GoodsImg" alt="" />
       </div>
       <div class="goodother">
         <div class="other-box">
           <div class="other-top">
             {{goodsdata[0].GoodsName}}
           </div>
           <div class="other-bottom">
             <div class="goodprice">
               ￥{{goodsdata[0].GoodsPrice}}
             </div>
             <div class="by" @click="handleJ(goodsdata[0])"  v-if="gowu">
               加入购物车
             </div>
             <div class="jj"  v-else>
               <img @click="handleJJ(goodsdata[0])" v-if="num>0" class="jian" src="../../../static/images/jian.png" alt="" />
               <p class="num" v-if="num>0">{{num}}</p>
               <img @click="handleJ(goodsdata[0])" class="jia" src="../../../static/images/jia.png" alt=""  v-if="num>0" />
              </div>
         </div>
       </div>
       <div class="good-detial">商品详情</div>
        </div>
       <Settlement />
     </div>
  </div>
</template>

<script>
  import Self from '@/self'
  import Settlement from '../Settlement/index'
export default {
  components: {
    Settlement
  },

  data() {
    return {
        goodsid:'',
        goodsdata:'',
        num:0,
        gowu:true,
        anum:'',
        goods:{},
      }
    },
  //page B
  methods:{
    handleJ(x){
      this.num++;
      if(this.num===1){
        this.gowu=false;
        this.anum=this.num;
        this.goods.cishu =this.num;
        this.goods.goodsname=x.GoodsName;
        this.goods.price=x.GoodsPrice;
        this.goods.goodsid=x.GoodsId;
        this.goods.goodsimg=x.GoodsImg;
        this.goods.choose=true;
        let a=1;
        // console.log('num===1');
        Self.$emit('add',this.goods);
        wx.setStorageSync(this.goodsid,this.anum);
      }else if(this.num > 1){


        this.anum=this.num;
        this.goods.cishu =this.num;
        this.goods.goodsname=x.GoodsName;
        this.goods.price=x.GoodsPrice;
        this.goods.goodsid=x.GoodsId;
        this.goods.goodsimg=x.GoodsImg;
        this.goods.choose=true;
        let a=1;
        // console.log('num>1');
        Self.$emit('addtwogoods',this.goods);
        wx.setStorageSync(this.goodsid,this.anum);

      }

      // console.log(wx.getStorageSync(this.goodsid))
    },
    handleJJ(x){
      let that=this;
      let zhegeid=this.goodsdata[0].GoodsId;
      let zhege=this.goodsdata[0];
      wx.showModal({
        title: '大哥',
        content: '小弟我这就给您跪下了 别点确定阿',
        success (res) {
          if (res.confirm) {
            that.num--;
            let  b=zhege;
            // console.log(b);
            Self.$emit('remove',b);
            if(zhegeid){
              wx.setStorageSync(zhegeid,that.num.toString());
              // console.log('aaaa');
            }

            if(that.num===0){
              that.gowu=true;
            }
          } else if (res.cancel) {
          }
        }
      });



    }
  },
  onLoad(options){
    this.goodsid=options.index;
    // console.log(this.goodsid)

    this.num=options.thenum;
    if(options.thenum > 0 ){
      this.gowu=false
    }else {
      this.gowu=true
    }
    // console.log(options);
    var that=this;

    // console.log(this.merchantSortid);
    wx.request({
      url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
      method: 'post',
      data: {
        type: 'findtheGoods',
        goodsid:this.goodsid
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: function (res) {
        that.goodsdata=res.data.address;
        // console.log(that.goodsdata);
      }
    });


  },
  mounted() {
    //接收A组件的数据
    Self.$on("addonegoods", function (a) {
      this.num ++;//总次数++

      wx.setStorageSync(a.goodsid,this.num);
      // console.log(this.goodlist)
    }.bind(this));
    Self.$on("removed", function (b) {


      if(b.goodsid===this.goodsdata[0].GoodsId){
        this.num --;
        wx.setStorageSync(b.goodsid,this.num);
        if(this.num===0){
          this.gowu=true;
        }

      }
      // console.log(this.num)

    }.bind(this));



  },
}
</script>

<style>
  .good-detial{
    height: 700rpx;
    margin-top: 30rpx;
    width:100%;
    background-color: #ffffff;

  }
  .other-bottom{
    height: 60%;
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .goodprice{
    color:red;
    font-size: 48rpx;
  }
  .by{
    height: 60rpx;
    width:200rpx;
    color: #ffffff;
    background-color: #49B152;
    text-align: center;
  }
  .other-box{
    width: 90%;
    margin:0 auto;
    height: 100%;
  }
  .other-top{
    height: 40%;
    width:100%;

  }

  .img-good{
    height: 100%;
    width: 100%;
  }
  .goodwrap{
    height: 100%;
    width:100%;
  }
  .gooddetail{
    overflow:auto;
    height: 100%;
  }
  .goodimg{
    height: 650rpx;
    width: 100%;

  }
  .goodother{
    height: 300rpx;
    width: 100%;
    background-color: #ffffff;

  }
  body{
    height:100%;
    background-color: #F1F1F1;
  }
  .bottom-nav{
    width:100%;
    height: 8%;
    position: absolute;
    bottom:0;
    background-color: #ccc;
    display: flex;

  }
  .go-box{
    height: 100%;
    width:70%;
    position: relative;
    color:#ccc;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .go{
    height: 120rpx;
    width:120rpx;
    position: absolute;
    bottom:23rpx;
    border-radius:50%;
    left:26rpx;
    background-color: #cccccc;
    display:flex;
    justify-content:center;
    align-items:center;


  }
  .Settlement{
    height: 100%;
    width:30%;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;

  }
  .go-i{
    height:80%;
    width: 80%;
    border-radius:50%;
  }
  .jj{
    display: flex;

  }
  .jia{
    height:50rpx;
    width:50rpx;
    /*position:absolute;*/
    /*top:60rpx;*/
    /*right: 41rpx;*/

  }
  .jian{
    height:45rpx;
    width:45rpx;
    /*position:absolute;*/
    /*top:0rpx;*/
    /*right: 131rpx;*/

  }
  .num{
    height:50rpx;
    width:50rpx;
    /*position:absolute;*/
    /*top:0rpx;*/
    /*right: 67rpx;*/
    text-align:center;


  }

</style>
